
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Claude Code - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>Claude Code - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">核心概念</div>
          <div class="card-question">Claude Code 的核心功能是什么？它的主要目标用户是谁？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">核心概念</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Claude Code 是一款 AI 编程工具，其核心功能是通过自然语言指令自动生成并部署前端项目和小型应用。它的目标用户涵盖初学者、独立开发者及希望提升开发效率的团队。</div>
          </div>
          <div class="card-source">来源: 文档内容开头部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">相较于其他工具，Claude Code 的主要优势是什么？同时，它目前存在哪些功能局限性？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">主要优势包括：全中文支持，降低语言门槛；极大简化从需求到上线的流程，无需复杂配置；与 AnyRouter 平台集成，便于额度管理和保障 API 安全。其局限性在于，目前对复杂交互、图片上传等高级功能支持有限，更适合中小型项目或原型开发。</div>
          </div>
          <div class="card-source">来源: 优势与特色</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">集成与依赖</div>
          <div class="card-question">Claude Code 是如何与 AnyRouter 平台集成的？这种集成带来了什么好处？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">集成与依赖</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Claude Code 通过配置特定的环境变量（ANTHROPIC_AUTH_TOKEN 和 ANTHROPIC_BASE_URL）与 AnyRouter 平台集成，用于 API 调用和额度管理。这样做的好处是保障了 API 的安全性，并且新用户注册 AnyRouter 后可获得 100 美元额度进行体验。</div>
          </div>
          <div class="card-source">来源: 核心功能概述, 优势与特色, 配置 Claude Code</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">门槛与成本</div>
          <div class="card-question">开始使用 Claude Code 之前，用户需要准备好哪些账号和关键信息？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">门槛与成本</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">用户需要先注册 GitHub 和 AnyRouter 账号。其中，最关键的是要从 AnyRouter 平台获取格式为 `sk-xxx` 的 API 密钥，用于后续的配置。</div>
          </div>
          <div class="card-source">来源: 使用门槛与成本</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">安装与配置</div>
          <div class="card-question">在 Windows 系统上安装 Claude Code 的前置依赖是什么？如何验证该依赖是否安装成功？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">安装与配置</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">前置依赖是安装 Node.js，文档推荐下载其 LTS 版本。安装完成后，可以在命令行中输入 `node --version` 命令，如果能正确显示版本号，则说明 Node.js 安装成功。</div>
          </div>
          <div class="card-source">来源: 安装 Node.js</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">安装与配置</div>
          <div class="card-question">为了让 Claude Code 能够正常使用，需要配置哪两个关键的环境变量？它们的值应该是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">安装与配置</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">需要配置两个环境变量：1. `ANTHROPIC_AUTH_TOKEN`，其值应设置为从 AnyRouter 获取的 `sk-xxx` 密钥。2. `ANTHROPIC_BASE_URL`，其值应设置为 `https://anyrouter.top`。</div>
          </div>
          <div class="card-source">来源: 配置 Claude Code</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">使用方法</div>
          <div class="card-question">如何使用 Claude Code 通过一句自然语言指令来快速生成一个个人主页网站？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">使用方法</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">在配置好环境的命令行中，输入指令 `claude code "帮我生成一个简单的个人主页"`，然后等待工具自动完成生成和部署工作。</div>
          </div>
          <div class="card-source">来源: 快速体验 Claude Code -> 1. 一句话生成网站</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">安装 Claude Code 命令行工具本身需要执行什么命令？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">在命令行中输入 `npm install -g @anthropic-ai/claude-code` 命令，即可全局安装 Claude Code 工具。</div>
          </div>
          <div class="card-source">来源: 安装 Claude Code</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">门槛与成本</div>
          <div class="card-question">使用 Claude Code 的成本是怎样的？新用户是否可以免费体验？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">门槛与成本</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">该工具目前没有强制的付费门槛。新用户通过注册 AnyRouter 账号可以获得 100 美元的额度，这笔额度足够用于体验和小规模使用。未来大规模调用或高级功能可能需要额外付费。</div>
          </div>
          <div class="card-source">来源: 使用门槛与成本</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
